<template>
  <div class="my-container">
    <!-- <div class="header">
      <img class="mobile-img" src="@/assets/mobile.png">
    </div>-->
    <div class="header user-info">
      <div class="base-info">
        <div class="left">
          <van-image class="avatar" round fit="cover" :src="profile.photo"></van-image>
          <div class="top">
            <span class="name" @click="onClick">{{profile.name}}</span>
          </div>
          <div class="bottom">
            <van-button type="default" size="mini" round>申请认证</van-button>
          </div>
        </div>
        <div class="time">
          <span class="read">
            <van-icon name="todo-list-o"/>
          </span>
          <span>今日阅读</span>
          <div>5分钟</div>
        </div>
      </div>
      <div class="data-status">
        <div class="data-item" v-for="item in infoList" :key="item.txt">
          <div class="count">{{item.num}}</div>
          <div class="text">{{item.txt}}</div>
        </div>
      </div>
    </div>
    <!-- 宫格 -->
    <van-grid class="nav-grid" clickable :column-num="3">
      <van-grid-item text="收藏">
        <template slot="icon">
          <van-icon name="star"/>
        </template>
      </van-grid-item>
      <van-grid-item text="历史">
        <i slot="icon">
          <van-icon name="clock"/>
        </i>
      </van-grid-item>
      <van-grid-item text="作品">
        <i slot="icon">
          <van-icon name="gift-card"/>
        </i>
      </van-grid-item>
    </van-grid>

    <div class="grid-nav"></div>
    <van-cell title="消息通知" is-link url/>
    <van-cell title="实名认证" is-link url/>
    <van-cell title="用户反馈" is-link url/>
    <van-cell title="小智同学" is-link url/>
    <van-cell title="系统设置" is-link url/>
    <van-cell title="退出登录" class="logout-cell" @click="onLogout" center clickable/>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "MyPage",
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {
    ...mapState("mine", ["profile", "info"]),
    infoList() {
      return [
        { txt: "动态", num: this.info.art_count },
        { txt: "关注", num: this.info.follow_count },
        { txt: "粉丝", num: this.info.fans_count }
      ];
    }
  },
  methods: {
    ...mapActions("mine", ["updateUserProfile", "updateUserInfo"]),
    onLogout() {
      this.$dialog
        .confirm({
          title: "确认退出吗？"
        })
        .then(() => {
          // on confirm
          // 确认退出：清除登录状态（容器中的 user + 本地存储中的 user）
          localStorage.removeItem("TOKEN");
          // 跳页面
          this.$router.push("/login");
        })
        .catch(() => {
          // on cancel
          console.log("取消执行这里");
        });
    },
    onClick() {
      let name = document.querySelector(".name");
      const text = name.innerHTML;
      if (text == "请登录") {
        this.$router.push("/login");
      }
    }
  },
  mounted() {
    this.updateUserProfile();
    this.updateUserInfo();
  }
};
</script>

<style lang="less" scoped>
.my-container .header {
  height: 400px;
  background: url("~@/assets/banner.png") no-repeat;
  background-size: cover;
}
.my-container .header .mobile-img {
  width: 132px;
  height: 132px;
}
.van-grid-item {
  font-size: 70px !important;
}
.van-grid-item_text {
  font-size: 70px !important;
}
.user-info .base-info {
  position: relative;
  height: 231px;
  padding: 76px 32px 23px;
  box-sizing: border-box;
}
.user-info .time {
  position: absolute;
  background-color: #3881c9;
  top: 140px;
  right: -30px;
  width: 220px;
  height: 90px;
  border: 1px solid #000;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  font-size: 25px;
}
.user-info .time div {
  position: absolute;
  bottom: 0;
  right: 70px;
}
.van-icon-todo-list-o[data-v-7a3d5949]:before {
  font-size: 60px;
}
.user-info .base-info .left {
  position: relative;
}
.user-info .base-info .left .avatar {
  width: 132px;
  height: 132px;
  border: 4px solid #fff;
  margin-right: 23px;
}
.user-info .base-info .right {
  margin-top: 80px;
}
.user-info .base-info .left .name {
  position: absolute;
  top: 30px;
  left: 150px;
  font-size: 30px;
  color: #fff;
}
.user-info .base-info .left .bottom {
  position: absolute;
  top: 70px;
  left: 150px;
}
.data-status {
  margin-top: 40px;
  display: flex;
  justify-content: space-around;
  font-size: 35px;
}
.data-status .data-item {
  width: 100px;
  color: #fff;
}
.data-status .data-item .count {
  text-align: center;
}
.data-status .data-item .text {
  text-align: center;
}
.logout-cell {
  margin-top: 10px;
  font-size: 35px;
  text-align: center;
  color: #d86262;
}
</style>